<script setup>
import { ref } from 'vue';

// 模拟已上课表数据
const completedData = ref([
  { id: 1, date: '2025-08-10', time: '09:00-11:00', location: '教室A101', topic: '课程预习' },
  { id: 2, date: '2025-08-11', time: '14:00-16:00', location: '教室A102', topic: '实践练习' },
]);
</script>

<template>
  <div>
    <el-table :data="completedData" stripe style="width: 100%">
      <el-table-column prop="date" label="日期" width="150" />
      <el-table-column prop="time" label="时间" width="150" />
      <el-table-column prop="location" label="地点" width="150" />
      <el-table-column prop="topic" label="课程主题" />
    </el-table>
  </div>
</template>

<style scoped>
@import 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css';

.el-table :deep(.el-table__row--striped) {
  background-color: #f9fafb;
}
</style>